<template>
  <div class="terminal-info">
    <a-card title="终端信息" style="margin-bottom: 12px" :loading="loadingData">
      <template #extra>
        <a-button type="primary" @click="turnBack">返回</a-button>
      </template>
      <a-descriptions bordered size="middle" :column="3">
        <a-descriptions-item label="终端序列号" :span="2">
          {{ id }}
        </a-descriptions-item>
        <a-descriptions-item label="终端版本号" :span="1">
          {{ terminalInfo.clientversion }}
        </a-descriptions-item>
        <a-descriptions-item label="终端名称" :span="2">
          <a-tooltip trigger="focus" title="按下Enter确认输入"  placement="topLeft">
            <a-input
                id="clientName"
                placeholder="请输入终端名称"
                v-model:value="terminalInfo.clientname"
                @pressEnter="update"
            />
          </a-tooltip>
        </a-descriptions-item>
        <a-descriptions-item label="操作系统" :span="1">
            {{ terminalInfo.osname }}
        </a-descriptions-item>
        <a-descriptions-item label="部门" :span="1">
            <a-tree-select
                v-model:value="terminalInfo.department"
                tree-data-simple-mode
                style="width: 120px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="departTree"
                @change="departSelect"
            />
        </a-descriptions-item>
        <a-descriptions-item label="最后登录IP" :span="1">
          {{ terminalInfo.lastip }}
        </a-descriptions-item>
        <a-descriptions-item label="模板名称" :span="1">
          <a-select
              placeholder="尚未绑定"
              v-model:value="terminalInfo.tempname"
              style="width: 120px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :options="templateList"
              @select="templateSelect"
          />
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="3">
          {{ terminalInfo.details }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card title="自动扫描" style="margin-bottom: 12px">
      <template #extra>
        <a-button type="primary" @click="autoStudy">新建任务</a-button>
        <a-tooltip>
          <template #title>
            新建自动扫描任务，完成后自动生成策略模板
          </template>
          <exclamation-circle-outlined style="margin-left: 12px" />
        </a-tooltip>
      </template>
      <scan-works :clienthash="id"></scan-works>
    </a-card>
    <a-card title="账号管理" style="margin-bottom: 12px">
      <account-manage :clienthash="id"/>
    </a-card>
    <a-card style="margin-bottom: 12px">
      <template #title>
        <terminal-status-title :client-hash="id"></terminal-status-title>
      </template>
      <terminal-status :os="terminalInfo.os" :client-hash="id"></terminal-status>
    </a-card>
    <template v-if="'1'==terminalInfo.os">
      <a-card title="客户端功能" style="margin-bottom: 12px">
        <a-descriptions layout="vertical" size="middle" bordered :column=4>
          <a-descriptions-item label="启用证书登录" style="width: 20%" :span="1">
            <a-switch
                checked-children="开"
                un-checked-children="关"
                v-model:checked="terminalInfo.uselicense"
                @change="setLicense" />
          </a-descriptions-item>
          <a-descriptions-item label="注册表策略" style="width: 20%" :span="1">
            <a-button @click="setReg">查看设置</a-button>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </template>
    <br>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, onBeforeUnmount, onMounted, toRefs} from 'vue'
import {Card, Descriptions, Tooltip, Select, TreeSelect, Switch} from 'ant-design-vue'
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
import AccountManage from '@/views/terminal/components/account-manage.vue'
import {ClientInfo, clientUpdate, GetLicenseState, SetLicenseState} from "@/api/client"
import {useCreateModal} from "@/hooks/"
import AutoStudyModal from '@/views/terminal/components/auto-study/auto-study-modal.vue'
import {useRouter} from "vue-router"
import {OsName} from "@/views/terminal/utils"
import Title from "@/views/terminal/subViews/components/terminal-status-title.vue"
import TerminalStatus from "@/views/terminal/subViews/components/terminal-status.vue"
import ScanWorks from "@/views/terminal/subViews/components/scan-works.vue"
import {deptAll} from "@/api/dept"
import {templateList} from "@/api/strategy/template"
import RegistryModal from "@/views/terminal/subViews/components/Windows/Registry.vue"

const terminalInfo = {
  终端序列号: "clienthash",
  终端版本号: "clientversion",
  终端名称: "clientname",
  操作系统: "os",
  系统版本: "osversion",
  所属部门: "departmentname",
  部门id: "department",
  最后登录ip: "lastip",
  模板名称: "tempname",
  模板id: "tempid",
  描述:"details"
}

export default defineComponent({
  name: "terminal-info",
  components: {
    ScanWorks,
    TerminalStatus,
    AccountManage,
    [Card.name]: Card,
    [Card.Meta.name]: Card.Meta,
    [Tooltip.name]: Tooltip,
    [Title.name]: Title,
    [Select.name]: Select,
    [TreeSelect.name]: TreeSelect,
    ExclamationCircleOutlined,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    [Switch.name]: Switch
  },
  props: {
    id: String
  },
  setup(props) {

    const state = reactive({
      terminalInfo: {
        clienthash:String,
        clientversion:String,
        clientname:"",
        os:'0',
        osname:String,
        osversion:String,
        departmentname:String,
        department:0,
        lastip:"",
        tempname:"",
        tempid:0,
        details:"",
        uselicense: false
      }, // 基本信息，显示用
      terminalData: {}, // 基本信息，源数据
      departTree:[] as any,
      templateList:[] as any,
      loadingData: true,
    })

    const loadData = async ()=>{
      const data = await ClientInfo({id: props.id})
      state.terminalData = data
      Object.keys(terminalInfo).forEach(key => state.terminalInfo[terminalInfo[key]] = data[terminalInfo[key]])
      state.terminalInfo["osname"] = OsName[data["os"]]
      if(null==data['lastip']) {
        state.terminalInfo['lastip'] = '- · - · - · -'
      }
    }

    const getDeptTree = async (fatherId: string | number) => {
      const param = {
        ID: fatherId
      }
      const {data} = await deptAll(param)
      return data.map(item => ({
        id: item.departmentid,
        pId: item.parent,
        value: item.departmentid,
        title: item.name
      }))
    }

    const getTempList = async () => {
      const {data} = await templateList({})
      return data.map(item =>({
        id: item.id,
        value: item.id,
        label: item.templatename
      }))
    }

    ~ async function() {
      state.loadingData=true
      state.departTree = await getDeptTree(1)
      state.templateList = await getTempList()
      await loadData()
      if('1'==state.terminalInfo.os){
        state.terminalInfo.uselicense = await GetLicenseState({clienthash:props.id})
      }
      state.loadingData=false
    }()

    const update = async ()=>{
      //if(""==state.terminalInfo.clientname){return message.warning('终端名称不能为空！')}
      await clientUpdate({
        "clienthash":state.terminalInfo.clienthash,
        "clientname":state.terminalInfo.clientname,
        "department":state.terminalInfo.department||0,
        "tempid":state.terminalInfo.tempid||0,
        "details":state.terminalInfo.details||""
      })
      await loadData()
      const el = document.getElementById("clientName")
      if(null!=el){
        el.blur()
      }
    }

    const departSelect = async (value)=>{
      state.terminalInfo.department=value
      await update()
    }

    const templateSelect = async (value)=>{
      state.terminalInfo.tempid=value
      await update()
    }

    const router = useRouter()

    const turnBack = ()=>{
      router.push({name:"terminal-list"})
    }

    // 自动学习
    const autoStudy = () => {
      useCreateModal(AutoStudyModal, {
        clientHash: props.id,
        callback: () => router.push(`#/terminal/info/${props.id}`)
      })
    }

    const setLicense = ()=>{
      console.log("uselicense",state.terminalInfo.uselicense)
      SetLicenseState({clienthash:props.id,state:state.terminalInfo.uselicense?0:1})
    }

    const setReg= ()=>{
      useCreateModal(RegistryModal,{
        clientHash: props.id
      })
    }

    return {
      ...toRefs(state),
      update,
      departSelect,
      templateSelect,
      autoStudy,
      turnBack,
      setLicense,
      setReg
    }
  }
})
</script>

<style lang="scss" scoped>
.terminal-info {
  max-width: 960px;
  margin: 0 auto;
}
</style>
